<template>
  <div class="container">
    <!-- 标题区 -->
    <div class="title-section">
      <h1>咨询师与训练方案评分系统</h1>
      <p>您的反馈将帮助我们持续提升服务质量</p>
    </div>

    <!-- 咨询师评估卡片 -->
    <div class="card consultant-card">
      <div class="card-header">
        <div class="icon-wrapper blue">
          <i class="fas fa-user-md"></i>
        </div>
        <h2>咨询师评估</h2>
      </div>

      <!-- 评估项1 -->
      <div class="rating-item">
        <div class="rating-header">
          <span class="rating-label">老师的态度表现</span>
          <span class="rating-value">{{ consultantRatings.attitude }}分</span>
        </div>
        <div
          class="star-rating"
          @mouseleave="resetHover('consultant', 'attitude')"
        >
          <div
            v-for="i in 5"
            :key="'attitude-' + i"
            class="star"
            :class="{
              active: i <= consultantRatings.attitude,
              hover: i <= consultantHover.attitude,
            }"
            @click="setRating('consultant', 'attitude', i)"
            @mouseover="setHover('consultant', 'attitude', i)"
          >
            <i class="fas fa-star"></i>
          </div>
        </div>
        <div class="rating-scale">
          <span>非常不满意</span>
          <span>非常满意</span>
        </div>
      </div>

      <!-- 评估项2 -->
      <div class="rating-item">
        <div class="rating-header">
          <span class="rating-label">老师的专业能力</span>
          <span class="rating-value">{{ consultantRatings.expertise }}分</span>
        </div>
        <div
          class="star-rating"
          @mouseleave="resetHover('consultant', 'expertise')"
        >
          <div
            v-for="i in 5"
            :key="'expertise-' + i"
            class="star"
            :class="{
              active: i <= consultantRatings.expertise,
              hover: i <= consultantHover.expertise,
            }"
            @click="setRating('consultant', 'expertise', i)"
            @mouseover="setHover('consultant', 'expertise', i)"
          >
            <i class="fas fa-star"></i>
          </div>
        </div>
        <div class="rating-scale">
          <span>非常不满意</span>
          <span>非常满意</span>
        </div>
      </div>

      <!-- 评估项3 -->
      <div class="rating-item">
        <div class="rating-header">
          <span class="rating-label">老师能够帮助您解决问题的程度</span>
          <span class="rating-value"
            >{{ consultantRatings.problemSolving }}分</span
          >
        </div>
        <div
          class="star-rating"
          @mouseleave="resetHover('consultant', 'problemSolving')"
        >
          <div
            v-for="i in 5"
            :key="'problemSolving-' + i"
            class="star"
            :class="{
              active: i <= consultantRatings.problemSolving,
              hover: i <= consultantHover.problemSolving,
            }"
            @click="setRating('consultant', 'problemSolving', i)"
            @mouseover="setHover('consultant', 'problemSolving', i)"
          >
            <i class="fas fa-star"></i>
          </div>
        </div>
        <div class="rating-scale">
          <span>非常不满意</span>
          <span>非常满意</span>
        </div>
      </div>

      <!-- 分隔线 -->
      <div class="divider"></div>

      <!-- 综合评分 -->
      <div class="rating-item">
        <div class="rating-header">
          <span class="rating-label">综合评分</span>
          <span class="rating-value">{{ consultantRatings.overall }}分</span>
        </div>
        <div
          class="star-rating"
          @mouseleave="resetHover('consultant', 'overall')"
        >
          <div
            v-for="i in 5"
            :key="'overall-' + i"
            class="star"
            :class="{
              active: i <= consultantRatings.overall,
              hover: i <= consultantHover.overall,
            }"
            @click="setRating('consultant', 'overall', i)"
            @mouseover="setHover('consultant', 'overall', i)"
          >
            <i class="fas fa-star"></i>
          </div>
        </div>
        <div class="rating-scale">
          <span>非常不满意</span>
          <span>非常满意</span>
        </div>
      </div>
    </div>

    <!-- 训练方案评估卡片 -->
    <div class="card program-card">
      <div class="card-header">
        <div class="icon-wrapper purple">
          <i class="fas fa-tasks"></i>
        </div>
        <h2>训练方案评估</h2>
      </div>

      <!-- 评估项1 -->
      <div class="rating-item">
        <div class="rating-header">
          <span class="rating-label">定制适合程度</span>
          <span class="rating-value">{{ programRatings.relevance }}分</span>
        </div>
        <div
          class="star-rating"
          @mouseleave="resetHover('program', 'relevance')"
        >
          <div
            v-for="i in 5"
            :key="'relevance-' + i"
            class="star"
            :class="{
              active: i <= programRatings.relevance,
              hover: i <= programHover.relevance,
            }"
            @click="setRating('program', 'relevance', i)"
            @mouseover="setHover('program', 'relevance', i)"
          >
            <i class="fas fa-star"></i>
          </div>
        </div>
        <div class="rating-scale">
          <span>非常不适合</span>
          <span>非常合适</span>
        </div>
      </div>

      <!-- 评估项2 -->
      <div class="rating-item">
        <div class="rating-header">
          <span class="rating-label">跟进难易程度</span>
          <span class="rating-value">{{ programRatings.difficulty }}分</span>
        </div>
        <div
          class="star-rating"
          @mouseleave="resetHover('program', 'difficulty')"
        >
          <div
            v-for="i in 5"
            :key="'difficulty-' + i"
            class="star"
            :class="{
              active: i <= programRatings.difficulty,
              hover: i <= programHover.difficulty,
            }"
            @click="setRating('program', 'difficulty', i)"
            @mouseover="setHover('program', 'difficulty', i)"
          >
            <i class="fas fa-star"></i>
          </div>
        </div>
        <div class="rating-scale">
          <span>非常困难</span>
          <span>非常容易</span>
        </div>
      </div>

      <!-- 评估项3 -->
      <div class="rating-item">
        <div class="rating-header">
          <span class="rating-label">问题帮助程度</span>
          <span class="rating-value">{{ programRatings.helpfulness }}分</span>
        </div>
        <div
          class="star-rating"
          @mouseleave="resetHover('program', 'helpfulness')"
        >
          <div
            v-for="i in 5"
            :key="'helpfulness-' + i"
            class="star"
            :class="{
              active: i <= programRatings.helpfulness,
              hover: i <= programHover.helpfulness,
            }"
            @click="setRating('program', 'helpfulness', i)"
            @mouseover="setHover('program', 'helpfulness', i)"
          >
            <i class="fas fa-star"></i>
          </div>
        </div>
        <div class="rating-scale">
          <span>没有帮助</span>
          <span>非常有帮助</span>
        </div>
      </div>

      <!-- 建议框 -->
      <div class="suggestion-box">
        <div class="suggestion-label">方案改进建议</div>
        <textarea
          v-model="suggestion"
          placeholder="请提出您的宝贵建议..."
          class="suggestion-textarea"
        ></textarea>
      </div>
    </div>

    <!-- 提交按钮 -->
    <button class="submit-btn" @click="submitEvaluation">提交评估</button>
  </div>
</template>

<script>
export default {
  name: "EvaluationSystem",
  data() {
    return {
      consultantRatings: {
        attitude: 0,
        expertise: 0,
        problemSolving: 0,
        overall: 0,
      },
      consultantHover: {
        attitude: 0,
        expertise: 0,
        problemSolving: 0,
        overall: 0,
      },
      programRatings: {
        relevance: 0,
        difficulty: 0,
        helpfulness: 0,
      },
      programHover: {
        relevance: 0,
        difficulty: 0,
        helpfulness: 0,
      },
      suggestion: "",
    };
  },
  methods: {
    setRating(category, type, value) {
      if (category === "consultant") {
        this.consultantRatings[type] = value;
      } else {
        this.programRatings[type] = value;
      }
    },
    setHover(category, type, value) {
      if (category === "consultant") {
        this.consultantHover[type] = value;
      } else {
        this.programHover[type] = value;
      }
    },
    resetHover(category, type) {
      if (category === "consultant") {
        this.consultantHover[type] = 0;
      } else {
        this.programHover[type] = 0;
      }
    },
    submitEvaluation() {
      alert("感谢您的评估！您的反馈对我们非常重要。");
      // 这里可以添加提交数据的逻辑
    },
  },
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

.container {
  max-width: 28rem;
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: "Noto Sans SC", sans-serif;
  background-color: #f8fafc;
  color: #334155;
  line-height: 1.6;
}

.title-section {
  text-align: center;
  margin-bottom: 2.5rem;
}

.title-section h1 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.title-section p {
  color: #64748b;
}

.card {
  background-color: white;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.icon-wrapper {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

.icon-wrapper.blue {
  background-color: #eff6ff;
}

.icon-wrapper.blue i {
  color: #3b82f6;
  font-size: 1.25rem;
}

.icon-wrapper.purple {
  background-color: #f5f3ff;
}

.icon-wrapper.purple i {
  color: #8b5cf6;
  font-size: 1.25rem;
}

.card-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
}

.rating-item {
  margin-bottom: 1.5rem;
}

.rating-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.rating-label {
  font-weight: 500;
  color: #374151;
}

.rating-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: #3b82f6;
}

.star-rating {
  display: flex;
  justify-content: space-between;
}

.star {
  color: #e2e8f0;
  transition: all 0.2s ease;
  cursor: pointer;
}

.star.active {
  color: #f59e0b;
}

.star.hover {
  color: #fcd34d;
}

.star i {
  font-size: 1.5rem;
}

.rating-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

.divider {
  border-top: 1px solid #f1f5f9;
  margin: 1.5rem 0;
}

.suggestion-box {
  margin-top: 1.5rem;
}

.suggestion-label {
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}

.suggestion-textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.75rem;
  transition: all 0.3s ease;
  resize: vertical;
  min-height: 6rem;
}

.suggestion-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
  border-color: #a5b4fc;
}

.submit-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  font-weight: 500;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  margin-bottom: 2rem;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3);
}

.submit-btn:active {
  transform: translateY(0);
}
</style>
